<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-12-05 15:16:44
 * @FilePath: \onemodeSWJ\src\views\paramPlanManage\sedParamDataManage\sedParamDataAdd.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <el-table
    :data="planData"
    border
    size="small"
    style="width: 50%; margin-bottom: 10px"
  >
    <el-table-column :label="labelText(planData[0].type)" align="center">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="reservoir" label="库区" align="center" />
      <el-table-column prop="river" label="干流" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createComment" label="备注" align="center" />
    </el-table-column>
  </el-table>

  <div>
    <SedParamDataAddSX v-if="planData[0].reservoir != '长江中下游'" />
    <SedParamDataAddCJ v-else />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { useRoute, RouteParams } from "vue-router";
import SedParamDataAddSX from "./sedParamDataAddSX.vue";
import SedParamDataAddCJ from "./sedParamDataAddCJ.vue";

export default defineComponent({
  components: { SedParamDataAddSX, SedParamDataAddCJ },
  setup() {
    const route = useRoute();

    const state: {
      planData: RouteParams[];
    } = reactive({
      // 方案参数
      planData: [{}],
    });

    onMounted(() => {
      state.planData[0] = route.params;
    });

    /**
     * @description: 根据type返回不同类型
     * @param text 不同的type
     * @return {*}
     */
    function labelText(text) {
      switch (text) {
        case "kms":
          return "挟沙力系数";
        case "eds":
          return "冲淤系数";
        case "csps":
          return "床沙级配";
        case "csgds":
          return "床沙粒径";
      }
    }

    return {
      ...toRefs(state),

      labelText,
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}
</style>
